<template>
  <div class="dash-board-page">
    <header class="main-header">
        <!-- 标题 -->
        <div class="title">
          <p class="black">{{$I18n.dashBoard}}</p>
        </div>
    </header>

    <section>
      <ul>
        <li>
          <span>{{$I18n.monthAddAccount}}</span>
          <p>1</p>
        </li>
        <li>
          <span>{{$I18n.monthAddOrder}}</span>
          <p>3</p>
        </li>
        <li>
          <span>{{$I18n.monthAddApply}}</span>
          <p>15</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
    }
  },
  created() {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.dash-board-page
  .main-header
    height 84px
    display block
    border-bottom solid 1px rgb(204, 204, 204)

  section
    ul
      background-color #fff
      border-bottom solid 1px rgb(204, 204, 204)
      padding 20px 16px
      display flex
      flex-wrap wrap

      li
        width 300px
        height 115px
        border solid 1px #e5e5e5
        padding 10px 25px
        box-sizing  border-box
        margin-right 20px
        position relative
        color #333

        span
          display block
          font-size 16px
          margin-bottom 10px

        p
          font-size 32px

        &:after
          content ''
          position absolute
          width 5px
          height 100%
          background-color #6a8ebf
          top 0
          left 0
</style>
